<template>
	<div class="syscfg-container">
		<!-- 顶部主 tabs -->
		<el-tabs v-model="activeTopTab" class="top-tabs">
			<el-tab-pane label="参数管理" name="params" />
			<el-tab-pane label="用户管理" name="user" />
			<el-tab-pane label="角色管理" name="role" />
			<el-tab-pane label="权限管理" name="permission" />
		</el-tabs>
 
		<div class="content">
			<!-- 左侧模型集菜单 -->
			<aside class="left-menu">
				<el-tabs v-model="activeTopTab1" >
					<el-tab-pane label="模型集" name="params" />
					<el-tab-pane label="指标统计" name="user" />
					<el-tab-pane label="预测指标" name="role" />
				</el-tabs>
				<el-menu :default-active="activeModel" class="model-menu" @select="onSelectModel">
					<el-menu-item v-for="m in modelList" :key="m.key" :index="m.key">
						{{ m.label }}
					</el-menu-item>
				</el-menu>
			</aside>

			<!-- 右侧配置主体 -->
			<section class="right-panel">
				<!-- 根据当前选中的模型显示不同的配置内容 -->
				<div v-if="activeModel === 'model_1'" class="config-content">
					<div class="datasource-row">
						<span class="label">数据源</span>
						<span class="value" :title="dataSource">{{ dataSource }}</span>
						<el-button type="primary" size="mini" @click="onChangeDS">切换</el-button>
					</div>

					<div class="field-box">
						<div class="field-title">字段选择</div>
						<el-checkbox-group v-model="checkedFields" class="field-grid">
							<el-checkbox v-for="f in fields" :key="f.key" :label="f.key">{{ f.label }}</el-checkbox>
						</el-checkbox-group>

						<div class="field-actions">
							<el-button size="mini" @click="checkAll">全选</el-button>
							<el-button size="mini" @click="uncheckAll">全不选</el-button>
							<el-button type="primary" size="mini" @click="applyConfig">应用</el-button>
						</div>
					</div>
				</div>

				<!-- 指标统计配置 -->
				<div v-else-if="activeModel === 'model_2'" class="config-content">
					<div class="stats-config">
						<div class="config-title">指标统计配置</div>
						<el-form :model="statsConfig" label-width="120px">
							<el-form-item label="统计周期">
								<el-select v-model="statsConfig.period" placeholder="请选择统计周期">
									<el-option label="日" value="daily" />
									<el-option label="周" value="weekly" />
									<el-option label="月" value="monthly" />
									<el-option label="年" value="yearly" />
								</el-select>
							</el-form-item>
							<el-form-item label="统计维度">
								<el-checkbox-group v-model="statsConfig.dimensions">
									<el-checkbox label="asset_type">资产类型</el-checkbox>
									<el-checkbox label="company">公司</el-checkbox>
									<el-checkbox label="profit_center">利润中心</el-checkbox>
								</el-checkbox-group>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="saveStatsConfig">保存配置</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>

				<!-- 预测指标配置 -->
				<div v-else-if="activeModel === 'model_3'" class="config-content">
					<div class="forecast-config">
						<div class="config-title">预测指标配置</div>
						<el-form :model="forecastConfig" label-width="120px">
							<el-form-item label="预测周期">
								<el-input-number v-model="forecastConfig.period" :min="1" :max="12" />
								<span class="unit">个月</span>
							</el-form-item>
							<el-form-item label="置信区间">
								<el-slider v-model="forecastConfig.confidence" :min="0.8" :max="0.99" :step="0.01"
									:format-tooltip="(val) => (val * 100).toFixed(0) + '%'" />
							</el-form-item>
							<el-form-item label="算法选择">
								<el-radio-group v-model="forecastConfig.algorithm">
									<el-radio label="arima">ARIMA</el-radio>
									<el-radio label="lstm">LSTM</el-radio>
									<el-radio label="prophet">Prophet</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="saveForecastConfig">保存配置</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</section>
		</div>
	</div>
</template>

<script>
export default {
	name: 'SystemConfig',
	data() {
		return {
			activeTopTab: 'params',
			activeModel: 'model_1',
			modelList: [
				{ key: 'model_1', label: '价值资产增分析模型' },
				{ key: 'model_2', label: '实物资产增分析模型' },
				{ key: 'model_3', label: '核心资产增分析模型' }
			],
			dataSource: 'odps_nydp_dev.ads_cst_xnpgpt_zcjzmxbl2',
			fields: [
				{ key: 'asset_code', label: '资产编号' },
				{ key: 'asset_type', label: '资产类型' },
				{ key: 'asset_name', label: '资产名称' },
				{ key: 'company', label: '公司名称' },
				{ key: 'profit_center', label: '利润中心' },
				{ key: 'manage_dept', label: '实物管理部门' },
				{ key: 'use_dept', label: '使用保管单位' },
				{ key: 'store_place', label: '资产存放坐落地点' },
				{ key: 'line_name', label: '所属线站名称' },
				{ key: 'asset_attr', label: '监管资产属性' },
				{ key: 'reval', label: '重新评估值' },
				{ key: 'reval_date', label: '上次重估日期' },
				{ key: 'user_accept', label: '用户资产无偿接收' },
				{ key: 'equip_code', label: '设备编号' },
				{ key: 'voltage', label: '电压等级' },
				{ key: 'land_cert', label: '房屋土地产权证号' },
				{ key: 'build_area', label: '建筑面积' },
				{ key: 'house_usage', label: '房屋用途' },
				{ key: 'month_rate', label: '月利率' },
				{ key: 'year_rate', label: '年利率' },
				{ key: 'outsourced_unit', label: '委托运维单位' }
			],
			checkedFields: ['asset_code', 'asset_type', 'asset_name'],
			statsConfig: {
				period: 'monthly',
				dimensions: ['asset_type', 'company']
			},
			forecastConfig: {
				period: 3,
				confidence: 0.95,
				algorithm: 'arima'
			}
		}
	},
	methods: {
		onSelectModel(index) {
			this.activeModel = index
			// TODO: 根据模型切换字段或数据源
		},
		onChangeDS() {
			// TODO: 打开弹窗切换数据源
			this.$message.info('数据源切换功能待接入')
		},
		checkAll() {
			this.checkedFields = this.fields.map(f => f.key)
		},
		uncheckAll() {
			this.checkedFields = []
		},
		applyConfig() {
			// TODO: 提交所选字段与数据源到后端
			this.$message.success(`已应用配置，选中字段数：${this.checkedFields.length}`)
		},
		saveStatsConfig() {
			this.$message.success('指标统计配置已保存')
		},
		saveForecastConfig() {
			this.$message.success('预测指标配置已保存')
		}
	}
}
</script>

<style lang="scss" scoped>
.syscfg-container {
	background: #fff;
	height: calc(100vh - 50px);
	display: flex;
	flex-direction: column;
}

.top-tabs {
	padding: 0 16px;

	:deep(.el-tabs__nav-wrap) {
		border-bottom: 1px solid #e6e6e6;
	}
}

.content {
	display: flex;
	flex: 1;
	overflow: hidden;
}

.left-menu {
	width: 300px;
	border-right: 1px solid #e6e6e6;
	background: #fafafa;
	display: flex;
	flex-direction: column;

	.menu-title {
		font-weight: bold;
		padding: 12px 16px;
	}

	.model-menu {
		border-right: none;
		flex: 1;
		overflow: auto;
	}
}

.right-panel {
	flex: 1;
	padding: 16px 20px;
	overflow: auto;

	.config-content {
		.datasource-row {
			display: flex;
			align-items: center;
			gap: 12px;
			margin-bottom: 18px;

			.label {
				color: #666;
			}

			.value {
				color: #1f7150;
				font-weight: 600;
				max-width: 60%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.field-box {
			.field-title {
				font-weight: bold;
				margin-bottom: 10px;
			}

			.field-grid {
				display: grid;
				grid-template-columns: repeat(3, minmax(180px, 1fr));
				gap: 8px 16px;
			}

			.field-actions {
				margin-top: 16px;
				display: flex;
				gap: 10px;
			}
		}

		.stats-config,
		.forecast-config {
			.config-title {
				font-weight: bold;
				margin-bottom: 15px;
			}

			.el-form-item {
				margin-bottom: 15px;
			}

			.el-form-item:last-child {
				margin-bottom: 0;
			}

			.unit {
				margin-left: 5px;
			}
		}
	}
}
</style>